<!--商家销量的横向柱状图-->
<template>
    <div class="com-container">
        <div class="com-chart" ref='seller_ref'>chart</div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request.js'
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                currentPage:2,
                totalPage:0,
                timeId:null//定时器标识
            }
        },
        created () {
            this.$socket.registerCallBack('sellerData',this.getData)
        },
        mounted () {
            this.initChart()
            // this.getData()
            this.$socket.send({
                action:'getData',
                socketType:'sellerData',
                chartName:'seller',
                value:''
            })
            window.addEventListener('resize',this.screenAdapter)
            // 在页面加载完成时，主动完成图表的适配
            this.screenAdapter()
        },
        destroyed () {
          clearInterval(this.timeId)
          //组件销毁时，需取消事件监听，防止内存泄漏
          window.removeEventListener('resize',this.screenAdapter)
          this.$socket.unRegisterCallBack('sellerData')
        },
        computed: {
            ...mapState(['theme'])
        },
        methods: {
            // 初始化echarts实例对象
            initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.seller_ref,this.theme)
                // 将初始配置项配置给实例对象
                const initOption={
                    title:{
                        text:'▎商家销量统计',
                        left:20,
                        top:20
                    },
                    // 配置坐标轴位置和大小
                    grid:{
                        top:'20%',
                        left:'3%',
                        right:'6%',
                        bottom:'3%',
                        containLabel:true//距离包含坐标轴上的文字
                    },
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'line',
                            z:0,//降低层级
                            lineStyle:{
                                color:'#2D3443'
                            }
                        }
                    },
                    xAxis:{
                        type:'value'
                    },
                    yAxis:{
                        type:'category'
                    },
                    series:[
                        {
                            name:'销量',
                            type:'bar',
                            label:{
                                show:true,
                                position:'right',
                                textStyle:{
                                    color:'white'
                                }
                            },
                            itemStyle:{
                                color:{
                                    x:0,
                                    y:0,
                                    x2:1,
                                    y2:0,
                                    colorStops:[
                                        {
                                            offset:0,color:'#5052EE'
                                        },
                                        {
                                            offset:1,color:'#AB6EE5'
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(initOption)
                // 鼠标移入移除图表关闭开启定时器
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timeId)
                })
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval()
                })
            },
            // 获取服务器数据
            getData(res){
                /* // 解构赋值 将数据里的data赋给Data
                const {data:Data}=await request({
                    url:'/seller'
                })
                this.data=Data.sort((a,b)=>a.value-b.value)//对数组进行排序 */
                this.data=res.sort((a,b)=>a.value-b.value)
                this.totalPage=this.data.length%5===0?this.data.length/5:Math.ceil(this.data.length/5)//获取总页数
                this.updateChart()
                this.startInterval()
            },
            // 更新图表
            updateChart(){
                const begin=(this.currentPage-1)*5
                const end=this.currentPage*5
                const showData=this.data.slice(begin,end)
                const sellerNames=showData.map(value=>value.name)
                const sellerValues=showData.map(value=>value.value)
                const dataOption={
                    yAxis:{
                        data:sellerNames
                    },
                    series:[
                        {
                            data:sellerValues
                        }
                    ]
                }
                this.chartInstance.setOption(dataOption)
            },
            startInterval(){
                if(this.timeId){
                    clearInterval(this.timeId)
                }
                this.timeId=setInterval(()=>{
                    this.currentPage++
                    if(this.currentPage>this.totalPage){
                        this.currentPage=1
                    }
                    this.updateChart()
                },3000)
            },
            // 浏览器窗口发生变化，图表大小跟着适配
            screenAdapter(){
                const titleFontSize=this.$refs.seller_ref.offsetWidth/100*3.6
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        }
                    },
                    tooltip:{
                        axisPointer:{
                            lineStyle:{
                                width:titleFontSize
                            }
                        },
                        formatter:arg=>{
                            return `${arg[0].name} ${arg[0].seriesName} ${arg[0].value}`
                        }
                    },
                    series:[
                        {
                            barWidth:titleFontSize,
                            itemStyle:{
                                barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0]
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            }
        },
        watch: {
            theme(){
                this.chartInstance.dispose()
                this.initChart()
                this.screenAdapter()
                this.updateChart()
            }
        }
    }
</script>

<style scoped>
 
</style>
